<template>
  <div>
    <div style="position: relative">
      <img class="bannerImg" :src="getPic('home_bg')"/>

      <div class="mineView" @click="mineClick">
        <img class="tagImg" :src="getPic('mine_bg')"/>
        <div class="flex_center mineContent">
          <img class="avatarImg" :src="getPic('mine')"/>
          <p class="tagLabel">我的</p>
        </div>
      </div>


    </div>

    <div class="btnView">
      <div v-for="(item, idx) in itemList" class="itemView" @click="itemClick(item)">

        <img class="iconView" :src="getPic(item.pic)"/>
        <p class="titleLabel">{{item.title}}</p>

      </div>

    </div>

  </div>

</template>

<script>
  import EnterpriseLevelAPI from "../../repo/api/EnterpriseLevelAPI";
  import EnterpriseCourseAPI from '../../repo/api/EnterpriseCourseAPI'
  import PlanAPI from "../../repo/api/PlanAPI";
  import {onlineActionTypes} from "../../repo/store/online";
  import { Toast } from 'vant'

  export default {
    name: "home",
    data() {
      return {
        huidaoUrl: '',
        itemList: [
          {
            pic: 'z0',
            title: 'Z0课程',
            type: 0,
          },
          {
            pic: 'z1',
            title: 'Z1课程',
            type: 0,
          },
          {
            pic: 'z2',
            title: 'Z2课程',
            type: 0,
          },
          {
            pic: 'z3',
            title: 'Z3课程',
            type: 0,
          },
          {
            pic: 'z4',
            title: 'Z4课程',
            type: 0,
          },
          {
            pic: 'z5',
            title: 'Z5课程',
            type: 0,
          },
          {
            pic: 'test',
            title: '职业测评',
            type: 1,
          },
          {
            pic: 'huidao',
            title: 'AI会道',
            type: 2,
          },
          {
            pic: 'chart',
            title: '数据统计',
            type: 3,
          },
        ]
      }
    },
    mounted() {
      this.requestCourse()
      this.requestHuiDao()

      EnterpriseLevelAPI.getGroupLevelInfo().then((res) => {
        if (!res.responseData.buyInfo) {
          Toast('请先购买团队服务');
          setTimeout(() => {
            this.$router.push({name: 'myOrg'})
          }, 500)
        }
      }).catch((e) => {
        console.log(e)
      })

      window['onJsLinkHuiDao'] = (jsonStr) => {
        this.onJsLinkHuiDao(jsonStr)
      }
    },
    methods: {
      requestCourse() {
        //获取星级课程列表
        //修改在线参数获取逻辑，统一hs和其他参数一起，保证数据完整
        this.$store.dispatch(`online/${onlineActionTypes.UPDATE_ONLINE_DATA_IF_NEED}`, {})
          .then((res) => {

            let onlinePlanCategories = this.$store.getters['online/associationPlanList'];
            this.itemList.forEach((item) => {
              if (item.type === 0) {
                let result = onlinePlanCategories[item.title]
                item.id = result[0]
              }
            })
          }).catch((reason) => {

        })
      },
      requestHuiDao() {

        //获取会道链接
        EnterpriseCourseAPI.getHuidaoUrl().then((result) => {
          this.huidaoUrl = result.responseData.tabUrl
        })
      },
      getPic(name) {
        if (window.devicePixelRatio > 2) {
          return `/web-hft-ee/static/img/home/${name}@3x.png`
        } else {
          return `/web-hft-ee/static/img/home/${name}@2x.png`
        }
      },
      mineClick() {
        this.$_router.push("/me")
      },
      itemClick(data) {

        let type = data.type

        if (type === 1) {
          this.$_router.push("/evaluation-list")
        } else if (type === 2) {
          if (this.huidaoUrl.length > 0) {
            this.enterHuidao()
          } else {
            EnterpriseCourseAPI.getHuidaoUrl().then((result) => {
              this.huidaoUrl = result.responseData.tabUrl
              this.enterHuidao()
            })
          }
        } else if (type === 3) {
          this.$_router.push("/university/chart")
        } else {
          if (data.id > 0) {
            this.$_router.push(`/plan/${data.id}`)
          } else {
            this.requestCourse()
          }
        }

      },
      enterHuidao() {
        let jumpUrl = this.huidaoUrl + '&referrer=' + encodeURIComponent(window.location.href)
        if (window.hasOwnProperty('zshft')) {
          window.zshft.onJsLinkHuiDao(jumpUrl.toString())
        }
      },
      onJsLinkHuiDao(data) {

      },


    }
  }
</script>

<style scoped>

  .bannerImg {
    margin: 24px;
    width: calc(100% - 48px);
    height: auto;
  }

  .mineView {
    position: absolute;
    right: 20px;
    top: 0px;
  }

  .tagImg {
    height: 30px;
    width: auto;
  }

  .mineContent {
    align-items: center;
    height: 30px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;

  }

  .avatarImg {
    width: 14px;
    height: 14px;
  }

  .tagLabel {
    margin-left: 4px;
    color: white;
    font-size: 16px;
    font-weight: 100;
  }

  .btnView {
    margin-left: 36px;
    margin-right: 36px;
    margin-top: 56px;
    display: flex;
    flex-wrap: wrap;

  }

  .iconView {
    width: 48px;
    height: 48px;
  }

  .titleLabel {
    margin-top: 12px;
    font-size: 16px;
    color: #1c1c1c;
  }

  .itemView {
    width: 33.3%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 48px;
  }

</style>


